<template>
  <div class="save-or-edit">
    <el-form ref="resourceForm" :model="resourceForm" :rules="resourceRules">
      <el-form-item label="资源名称" prop="name" :label-width="formLabelWidth">
        <el-input
          placeholder="请填写资源名称"
          v-model="resourceForm.name"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="资源路径" prop="url" :label-width="formLabelWidth">
        <el-input
          placeholder="请填写资源路径"
          v-model="resourceForm.url"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="资源分类"
        prop="categoryId"
        :label-width="formLabelWidth"
      >
        <el-select
          clearable
          placeholder="请选择资源分类"
          v-model="resourceForm.categoryId"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        placeholder="请填写资源描述内容"
        label="资源描述"
        :label-width="formLabelWidth"
      >
        <el-input
          type="textarea"
          :rows="5"
          v-model="resourceForm.description"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelAddOrEditRole">取 消</el-button>
      <el-button type="primary" @click="confirmAddOrEditRole('resourceForm')"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  addOrUpdateResource,
  getAllCategory,
  getResourceById
} from '@/service/resource'

export default {
  name: 'SaveOrEdit',
  props: {
    resourceId: {
      type: [Number, String],
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  data () {
    return {
      resourceForm: {
        name: '',
        url: '',
        categoryId: '',
        description: ''
      },
      options: [],
      formLabelWidth: '120px',
      resourceRules: {
        name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
        categoryId: [
          { required: true, message: '请选择资源分类', trigger: 'blur' }
        ],
        url: [{ required: true, message: '请输入资源路径', trigger: 'blur' }]
      }
    }
  },
  created () {
    // console.log(this.isEdit, this.resourceId)
    this.resourceId && this.loadResource(this.resourceId)
    // this.loadRole()
    this.loadAllCategory()
  },
  watch: {
    resourceId (newValue) {
      console.log(newValue, this.isEdit)
      // console.log(newValue)
      if (this.isEdit) {
        // console.log(newValue)
        this.loadResource(newValue)
      }
    }
  },
  methods: {
    //   加载资源信息
    async loadResource (resourceId) {
      console.log(resourceId)
      if (!this.resourceId) return
      const { data } = await getResourceById(resourceId)
      if (data.code === '000000') {
        this.resourceForm = data.data
        // for (const key in data.data) {
        //   if (data.data[key]) {
        //     this.resourceForm[key] = data.data[key]
        //   }
        // }
      }
    },
    // 保存编辑结果
    async confirmAddOrEditRole (formName) {
      try {
        // 校验是否有未填项
        const result = await this.$refs[formName].validate()
        // 有必填项未填，中止操作
        if (!result) return
        const { data } = await addOrUpdateResource(this.resourceForm)
        if (data.code === '000000') {
          this.$message.success(this.isEdit ? '资源编辑成功' : '资源新增成功')
          // 获取新的资源列表
          this.$emit('success')
          //   置空用户信息
          this.resourceForm = {}
          this.resourceId = ''
        } else {
          this.$message.error(data.mesg)
        }
      } catch (error) {
        console.log('验证失败', error)
      }
    },
    // 取消资源编辑
    cancelAddOrEditRole () {
      this.$emit('cancel')
      //   置空用户信息
      // this.resourceForm = {}
    },
    // 加载资源分类
    async loadAllCategory () {
      const { data } = await getAllCategory()
      if (data.code === '000000') {
        this.options = data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.save-or-edit {
  .el-select {
    width: 100%;
  }
}
</style>
